import {reactive, computed, toRefs} from 'vue'
import {defineStore} from 'pinia'

import {language} from '../lang'

export default defineStore('app', () => {
  const state = reactive({
    language,
  });
  return {
    ...toRefs(state),
    setLang(lang) {
      state.language = lang;
      if (lang.includes('-')) {
        const lang_arr = lang.split('-');
        lang_arr[1] = lang_arr[1].toUpperCase();
        lang = lang_arr.join('-');
      }
      document.querySelector('html').setAttribute('lang', lang);
    }
  }
}, {
  persist: true,
});
